<template>
  <u-popup
    class="rights-popup"
    v-model="show"
    :closeable="closeable"
    :custom-style="{ background: 'transparent' }"
    :mode="popupMode"
    :width="width"
    :height="height"
    close-icon-size="40"
    negative-top="48"
    :border-radius="borderRadius"
    :mask-close-able="maskCloseAble"
    :close-icon-pos="closeIconPos"
    @close="clickClose"
  >
    <u-image
      class="pop-image"
      @click="clickButtonAction"
      width="100%"
      :height="imgHeight"
      :fade="fade"
      :mode="imgMode"
      :src="backgroundSrc"
    ></u-image>
    <slot name="footer"></slot>
  </u-popup>
</template>
<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    borderRadius: {
      type: [String, Number],
      default: 0
    },
    closeable: {
      type: Boolean,
      default: true
    },
    fade: {
      type: Boolean,
      default: true
    },
    hasSlot: {
      type: Boolean,
      default: false
    },
    closeIconPos: {
      type: String,
      default: 'top-right'
    },
    width: {
      type: String,
      default: '520rpx'
    },
    height: {
      type: String,
      default: '825rpx'
    },
    maskCloseAble: {
      type: Boolean,
      default: false
    },
    popupMode: {
      type: String,
      default: 'center' // 居中显示
    },
    imgHeight: {
      type: String,
      default: '100%' // 图片高度
    },
    imgMode: {
      type: String,
      default: 'scaleToFill' // 缩放填充  详情请看uni-app 关于image的mode属性
      // default: 'aspectFit', // 保持纵横比缩放
    },
    backgroundSrc: {
      type: String, //https://img3.job1001.com/ypMp/elan/images/career/positionDictionary/college_adv_alert1.png
      default:
        'https://img3.job1001.com/ypMp/elan/images/career/positionDictionary/college_adv_alert1.png' //this.$imgBaseSelf + "career/positionDictionary/college_adv_alert1.png",
    }
  },

  data() {
    return {
      inputText: ''
    };
  },

  methods: {
    clickClose() {
      console.log('🚀 ~ close ~ ');
      this.$emit('close');
    },

    clickButtonAction() {
      console.log('🚀 ~ next ~ ');
      this.$emit('next');
    }
  }
};
</script>

<style lang="scss">
.rights-popup {
  ::v-deep .u-mode-center-box {
    background-color: transparent !important;
  }
}
</style>
